<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"><view slot="navbar-center">搜索框</view></w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{ padding: '0' }"><w-search v-model="search"></w-search></pageDemoBlock>
		<pageDemoBlock title="禁用搜索" color="#7058e4" :contentStyle="{ padding: '0' }"><w-search placeholder="这是一个禁用的搜索框" disabled></w-search></pageDemoBlock>
		<pageDemoBlock title="右侧插槽" color="#47e4b0" :contentStyle="{ padding: '0' }">
			<w-search v-model="search"><view class="search-right" slot="search-right" @click="searchClick">搜索</view></w-search>
		</pageDemoBlock>
		<pageDemoBlock title="自定义背景" color="#e44515" :contentStyle="{ padding: '0' }">
			<w-search placeholder="搜索你喜欢的商品" v-model="search" backgroundColor="#31CDB1">
				<view class="search-right search-text" slot="search-right" @click="searchClick">搜索</view>
			</w-search>
		</pageDemoBlock>
	</view>
</template>

<script>
import pageDemoBlock from '@/components/page-demo-block';
export default {
	components: {
		pageDemoBlock
	},
	data() {
		return {
			search: ''
		};
	},
	methods: {
		searchClick() {
			uni.showToast({
				title: `内容：${this.search}`,
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.search-right {
	height: 100%;
	width: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
}
.search-text {
	color: #fff;
}
.search-right:active {
	background-color: rgba(0, 0, 0, 0.1);
}
</style>
